<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				box-sizing: border-box;
			}

			.slider {
				width: 560px;
				height: 400px;
				overflow: hidden;
			}

			.slider-wrapper {
				width: 100%;
				height: 320px;
			}

			.slider-wrapper img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.slider-footer {
				height: 80px;
				background-color: rgb(100, 67, 68);
				padding: 12px 12px 0 12px;
				position: relative;
			}

			.slider-footer .toggle {
				position: absolute;
				right: 0;
				top: 12px;
				display: flex;
			}

			.slider-footer .toggle button {
				margin-right: 12px;
				width: 28px;
				height: 28px;
				appearance: none;
				border: none;
				background: rgba(255, 255, 255, 0.1);
				color: #fff;
				border-radius: 4px;
				cursor: pointer;
			}

			.slider-footer .toggle button:hover {
				background: rgba(255, 255, 255, 0.2);
			}

			.slider-footer p {
				margin: 0;
				color: #fff;
				font-size: 18px;
				margin-bottom: 10px;
			}

			.slider-indicator {
				margin: 0;
				padding: 0;
				list-style: none;
				display: flex;
				align-items: center;
			}

			.slider-indicator li {
				width: 8px;
				height: 8px;
				margin: 4px;
				border-radius: 50%;
				background: #fff;
				opacity: 0.4;
				cursor: pointer;
			}

			.slider-indicator li.active {
				width: 12px;
				height: 12px;
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<div class="slider">
			<div class="slider-wrapper">
				<img src="../images/20241111/slider01.jpg" alt="" />
			</div>
			<div class="slider-footer">
				<p>对人类来说会不会太超前了？</p>
				<ul class="slider-indicator">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div class="toggle">
					<button class="prev">&lt;</button>
					<button class="next">&gt;</button>
				</div>
			</div>
		</div>
		<script>
			// const arr = [1, 3]
			// arr[0]
			// 1. 初始数据
			const sliderData = [
				{
					url: "../images/20241111/slider01.jpg",
					title: "对人类来说会不会太超前了？",
					color: "rgb(100, 67, 68)",
				},
				{
					url: "../images/20241111/slider02.jpg",
					title: "开启剑与雪的黑暗传说！",
					color: "rgb(43, 35, 26)",
				},
				{
					url: "../images/20241111/slider03.jpg",
					title: "真正的jo厨出现了！",
					color: "rgb(36, 31, 33)",
				},
				{
					url: "../images/20241111/slider04.jpg",
					title: "李玉刚：让世界通过B站看到东方大国文化",
					color: "rgb(139, 98, 66)",
				},
				{
					url: "../images/20241111/slider05.jpg",
					title: "快来分享你的寒假日常吧~",
					color: "rgb(67, 90, 92)",
				},
				{
					url: "../images/20241111/slider06.jpg",
					title: "哔哩哔哩小年YEAH",
					color: "rgb(166, 131, 143)",
				},
				{
					url: "../images/20241111/slider07.jpg",
					title: "一站式解决你的电脑配置问题！！！",
					color: "rgb(53, 29, 25)",
				},
				{
					url: "../images/20241111/slider08.jpg",
					title: "谁不想和小猫咪贴贴呢！",
					color: "rgb(99, 72, 114)",
				},
			];

			// 1. 需要一个随机数
			function randomNum(n, m) {
				return Math.floor(Math.random() * (m - n + 1) + n);
			}
			let num = randomNum(0, sliderData.length);

			// 2. 把对应的数据渲染到标签里面
			// 2.1 获取图片
			const imgEle = document.querySelector("img");
			// 2.2. 修改图片路径  =  对象.url
			imgEle.src = sliderData[num].url;

			// 3. 把p里面的文字内容更换
			// 3.1 获取p
			const pEle = document.querySelector("p");
			// 3.2修改p
			pEle.innerText = sliderData[num].title;

			// 4. 修改底部背景颜色
			// 4.1 获取footer
			const divEle = document.querySelector(".slider-footer");

			// 4.2 修改footer
			divEle.style.backgroundColor = sliderData[num].color;

			// 5. 小圆点
			// 5.1 获取图片对应的小圆点
			const liList = document.querySelectorAll("li");

			// 5.2 让当前这个小li 添加 active这个类
			liList[num].classList.add("active");
		</script>
	</body>
</html>
